<template>
  <div>
    <!-- 插值表达式，插值表达式里面的环境为js环境 -->
    <h3>您的姓名：{{ name }}</h3>
    <hr />
    <h3>您的姓名：{{ name + " -- 你好世界" }}</h3>
    <hr />
    <div>您的年龄为：{{ age + 1 }}</div>
    <hr />
    <h5>{{ title }}</h5>
    <!-- 使用js中的内置函数 -->
    <h5>{{ title.substr(0, 10) }}</h5>
    <h5>{{ mysubstr(title) }}</h5>
    <hr />
    <!-- 三目运算 -->
    <h3>{{ age >= 11 ? "少年" : "儿童" }}</h3>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "张三",
      age: 12,
      title: "重庆女子打出租小铁盒里掏出白色粉末？ “的哥”将其拉进派出所",
    };
  },
  methods: {
    mysubstr(str = "") {
      return str.substr(0, 10);
    },
  },
};
</script>

<style lang="scss">
</style>
